<template>
  <div class="home">
    <van-nav-bar title="审批" left-text="返回" left-arrow @click-left="returnBtn">
      <template #right>
        <van-button size="small" type="primary" @click="doApprove">提交审批</van-button>
      </template>
    </van-nav-bar>
    <div class="" v-if="obj">
      <van-form ref="approveForm">
        <van-field
          v-model="obj.approveOrderCode"
          label="审批单编号"
          input-align="right"
          readonly
        />
        <van-field
          v-model="obj.approveOrderName"
          label="审批单名称"
          input-align="right"
          readonly
        />
        <van-field
          v-model="obj.currentName"
          label="当前审批节点名称"
          :label-width="140"
          input-align="right"
          readonly
        />
        
        <div class="shenpi">
          <span>审批签名</span>
          <img :src="oUserStore.signImg" class="sign-img" style="width: 100px;height: 40px;border: 1px solid #ccc;" @click="isShowModel = true" />
        </div>
        <van-field
          v-model="obj.approveOpinion"
          rows="3"
          :required="obj.approveResult === '3'"
          :rules="[{ required: obj.approveResult === '3', message: '请输入驳回原因' }]"
          autosize
          label="审批意见"
          type="textarea"
        />
        <van-field
          v-model="approveResultName"
          label="审批结果"
          :label-width="100"
          input-align="right"
          readonly
          required
          :rules="[{ required: true, message: '请选择审批结果' }]"
        >
          <template #input>
            <van-radio-group
              v-model="obj.approveResult"
              direction="horizontal"
              @change="changeApproveResult"
            >
              <van-radio :name="item.key" v-for="(item,index) in getEnumList('ApproveResult')" :key="index">{{item.value}}</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-form>

    </div>
    <div class="details-per" v-if="obj">
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().budgetProjectTwo">
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
          预算控制-二级项目信息
        </van-divider>
        <projectTwoPreview :projectTwoId="obj.businessId" />
      </div>
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().budgetOne">
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
          预算控制-一上预算编制信息
        </van-divider>
        <budgetOneDetail :budgetOneId="obj.businessId" />
      </div>
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().budgetTwo">
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
          预算控制-二上预算编制信息
        </van-divider>
        <budgetTwoDetail :budgetTwoId="obj.businessId" />
      </div>
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().expenditureKpi">
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
          收支控制-指标单
        </van-divider>
        <expenditureKpiDetail :expenditureKpiId="obj.businessId" />
      </div>
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().expenditureQuota">
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
          收支控制-额度下达单
        </van-divider>
        <expenditureQuotaDetail :expenditureQuotaId="obj.businessId" />
      </div>
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().expenditureAdjustment">
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
          收支控制-调整单
        </van-divider>
        <expenditureAdjustmentDetail :expenditureAdjustmentId="obj.businessId" />
      </div>
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().expenditureApplication">
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
          收支控制-事前用款申请单
        </van-divider>
        <expenditureApplicationDetail :expenditureApplicationId="obj.businessId" />
      </div>
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().expenditureReimbursement">
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
          收支控制-报账单
        </van-divider>
        <expenditureReimbursementDetail :expenditureReimbursementId="obj.businessId" />
      </div>
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().contractInitial">
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
          合同管理-初始合同
        </van-divider>
        <contractInitialDetail :contractInitialId="obj.businessId" />
      </div>
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().contractMain">
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
          合同管理-主合同
        </van-divider>
        <contractMainDetail :contractInitialId="obj.businessId" />
      </div>
      <!--合同变更-->
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().contractChange">
        <contractChangeDetail :contractChangeId="obj.businessId" />
      </div>
      <!--合同借阅-->
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().contractBorrow">
        <contractBorrowingDetail :contractBorrowingId="obj.businessId" />
      </div>
      <!--合同请款-->
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().contractCash">
        <contractCashDetail :contractCashId="obj.businessId" />
      </div>
      <!--补充协议-->
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().contractSupplemental">
        <contractSupplementalDetail :contractSupplementalId="obj.businessId" />
      </div>
      <!--合同验收-->
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().contractChecking">
        <contractCheckingDetail :contractCheckingId="obj.businessId" />
      </div>
      <!--合同中止-->
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().contractInterrupt">
        <contractInterruptDetail :contractInterruptId="obj.businessId" />
      </div>
      <!--合同终止-->
      <div class="project-details" v-if="obj.businessType === approveOrderBusinessTypes().contractTerminate">
        <contractTerminateDetail :contractTerminateId="obj.businessId" />
      </div>
    </div>
    <van-popup v-model:show="isShowModel" :closeable="true" >
      <signature @close="isShowModel = false"></signature>
    </van-popup>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import {parseTime} from "@/utils/ruoyi";
  import { svc} from '@/config/common'
  import userStore from '@/store/modules/user';
  import { useRoute, useRouter } from "vue-router";
  import {getUserId} from "@/config/cookie";
  import {doGet, doPost} from '@/config/http'
  import userSign from "@/views/profile/userSign.vue";
  import signature from '@/h5/components/signature.vue';
  import projectTwoPreview from '@/h5/components/projectTwoPreview.vue'
  import budgetOneDetail from '@/h5/components/budgetOneDetail.vue'
  import budgetTwoDetail from '@/h5/components/budgetTwoDetail.vue'
  import expenditureKpiDetail from '@/h5/components/expenditureKpiDetail.vue'
  import expenditureQuotaDetail from '@/h5/components/expenditureQuotaDetail.vue'
  import expenditureAdjustmentDetail from '@/h5/components/expenditureAdjustmentDetail.vue'
  import expenditureApplicationDetail from '@/h5/components/expenditureApplicationDetail.vue'
  import expenditureReimbursementDetail from '@/h5/components/expenditureReimbursementDetail.vue'
  import contractInitialDetail from '@/h5/components/contractInitialDetail.vue'
  import contractMainDetail from '@/h5/components/contractMainDetail.vue'
  import contractChangeDetail from '@/h5/components/contractChangeDetail.vue'
  import contractBorrowingDetail from '@/h5/components/contractBorrowingDetail.vue'
  import contractCashDetail from '@/h5/components/contractCashDetail.vue'
  import contractSupplementalDetail from '@/h5/components/contractSupplementalDetail.vue'
  import contractInterruptDetail from '@/h5/components/contractInterruptDetail.vue'
  import contractTerminateDetail from '@/h5/components/contractTerminateDetail.vue'
  import contractCheckingDetail from '@/h5/components/contractCheckingDetail.vue'

  import {approveOrderBusinessTypes} from "@/config/common";

  import { showSuccessToast, showFailToast } from 'vant';

// import { showConfirmDialog } from 'vant';
  const today = parseTime(new Date().getTime(), '{y}-{m}-{d}');//new Date().pattern("yyyy年MM月dd日"),
  const router = useRouter();
  const route = useRoute();
  const oUserStore = userStore();
  console.log('oUserStore',oUserStore)

  let approveForm = ref(null)
  let active1 = ref(0)

  let isShowModel = ref(false)

  let id = ref('')
  let obj = ref(null)
  let approveResultName = ref('')
  const initObj = async() => {
    if (route.query.id) {
      id.value = route.query.id
      obj.value = await doGet(svc, `/approve-order/${id.value}`, {}, true)
      obj.value.approveResult = ''
      obj.value.approveOpinion = ''
      console.log('obj', obj.value)
    }
  }
  initObj()
  const changeApproveResult = (data) => {
    console.log('data',data)
    approveResultName.value = data
  }
  const doApprove = async () => {
    let valid = await approveForm.value.validate().catch((err)=>{return err})
    if (valid && valid.length > 0) {
      showFailToast('表单验证不通过，请检查数据。')
      return
    }
    let o = {}
    o.approveOrderId = obj.value.id
    o.approveResult = obj.value.approveResult
    o.approveOpinion = obj.value.approveOpinion
    if (o.approveResult === '3' && !o.approveOpinion) {
      showFailToast('请输入审批意见')
      return
    }
    doPost(svc, '/customApprove/sendApprove', o).then(_ => {
      showSuccessToast('操作成功')
      setTimeout(() => {
        router.push('/h5_home')
      }, 1000)
    })
  }
  const returnBtn = () => {
    router.push({path: '/h5_home'})
  }

</script>
<style scoped lang="scss">
.home {
  // width: 100%;
  padding: 0 .9375rem;
  height: 100vh;
  overflow: hidden;
}
.home-head-per {
  width: 100%;
  overflow: hidden;
}
.van-highlight {
  margin-top: 1.25rem;
  line-height: 1.5rem;
}
.home-list {
  display: flex;
  align-items: center;
  & span {
    background: var(--van-primary-color);
    color: #fff;
    padding: .0625rem .3125rem;
    border-radius: 50%;
    display: inline-block;
    margin-right: .625rem;
  }
}
.home-head {
  width: 100%;
  height: 8rem;
  // background: var(--van-primary-color);
  background-color: #dfc059;
  text-align: center;
  overflow: hidden;
  & span {
    display: inline-block;
    color: #fff;
    font-size: 1.25rem;
    margin-top: 1.25rem;
  }
}
.home-head-content {
  width: 80%;
  // height: 8rem;
  background: #fff;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 4rem;
  margin-left: -40%;
  box-shadow:0 0 12px var(--van-gray-5);
  padding: .625rem;
  .head-content-name {
    color: black;
    font-weight: 500;
    font-size: 1.2rem;
    & span {
      color: var(--van-gray-6);
    }
  }
  .head-content-info {
    color: var(--van-gray-6);
    margin-top: .3125rem;
  }
}
.home-content-list {
  margin-top: 5.625rem;
  // width: 100%;
  // padding: 1.25rem 0;
  // margin-top: 5.625rem;
  // background: #fff;
  // display: flex;
  // align-items: center;
  // justify-content: center;
}
.home-content-list span {
  color: var(--van-primary-color);
}
.home-content-link {
  margin-top: 1.25rem;
}
.custom-title {
  padding-left: .9375rem;
  color: var(--van-primary-color);
  font-size: 1rem;
}
.home-content-link .van-cell {
  padding: 1.25rem .9375rem;
}
.danger-color {
  color: var(--van-danger-color);
}
.list-info {
  padding: .9375rem 0;
  text-align: center;
  background: #fff;
}
// .details-per {
//   width: 100%;
//   // height: calc(100% - 40%);
//   height: 57%;
//   overflow: hidden;
//   overflow-y: auto;
// }
.shenpi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // padding: .9375rem 1.25rem;
  background: var(--van-cell-background);
  box-sizing: border-box;
  width: 100%;
  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
  overflow: hidden;
  color: var(--van-cell-text-color);
  font-size: var(--van-cell-font-size);
  line-height: var(--van-cell-line-height);
  border-bottom: 1px solid var(--van-border-color);;
  & span {
    color: var(--van-field-label-color);
    text-align: left;
    word-wrap: break-word;
    font-weight: 700;
  }

}
// .project-details {
//   width: 100%;
//   // height: 3rem;
//   overflow: hidden;
// }
</style>

